<template>
  <a-drawer :open="visible" title="配送单详情" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="单据编号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="源订单号">{{ options?.related?.no }}</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ options?.related?.store?.store_name }}</a-descriptions-item>
        <a-descriptions-item label="所属片区">{{ options?.related?.store?.region?.name }}</a-descriptions-item>
        <a-descriptions-item label="业务员">{{ options?.related?.salesman?.rename }}</a-descriptions-item>
        <a-descriptions-item label="仓库">{{ options.related?.warehouse?.name }}-{{ getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', options.related?.warehouse?.attribute_type) }}</a-descriptions-item>
        <a-descriptions-item label="订单类型">
          <span>{{ getDescByValue('ORDER_STATRS_ENUM', options.type) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="配送状态">
          <span>{{ getDescByValue('UNSETYLED_TY_ENUM', options.status) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="日期">{{ options.create_time }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" title="签收信息" v-if="options.status == 3">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="结算方式">{{ PaymentType[options?.sign?.payment_type] }}</a-descriptions-item>
            <a-descriptions-item label="收款方式">{{ PaymentModel[options?.sign?.payment_model] }}</a-descriptions-item>
            <a-descriptions-item label="应收金额">{{ options?.sign?.receivable_amount }}</a-descriptions-item>
            <a-descriptions-item label="签收金额">{{ options?.sign?.sign_amount }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{ options?.sign?.remark }}</a-descriptions-item>
            <a-descriptions-item label="签收位置"
              ><div @click="goMap" style="color: cornflowerblue; cursor: pointer">{{ options?.driver_sign_address }}</div></a-descriptions-item
            >
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image-preview-group>
            <div v-for="item in options?.sign?.certificate.split(',')" style="display: inline-block; margin-right: 5px">
              <a-image :width="options?.sign?.certificate ? 30 : 50" :src="item || failImg" />
            </div>
          </a-image-preview-group>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'inventory'">
        <InventorySalesmanTable :enterpriseId="options.detail" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InventorySalesmanTable from './inventory-salesman-table.vue'
import { useEnums } from '@/hooks/plugins/useEnums'
import failImg from '@/assets/images/notice/failImg.png'
import { inject } from 'vue'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])
const enum PaymentType {
  '现结' = 1,
  '欠款',
  '预付款',
  '0元赠',
  '押金'
}

const enum PaymentModel {
  '现金' = 1,
  '微信',
  '支付宝',
  '公司账户'
}

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options: any = ref({})
// 详情tab
const activeKey = ref('inventory')
const tabList = [
  {
    key: 'inventory',
    tab: '商品明细'
  }
]

function showDrawer(item) {
  options.value = item
  visible.value = true
}
const router = useRouter()
const goMap = () => {
  router.push({
    path: '/map_sign',
    query: {
      lat: options.value.sign_lat,
      lon: options.value.sign_lon
    }
  })
}
const onClose = () => {
  visible.value = false
}
</script>
